<template>
  <van-nav-bar title="商品评价" left-text="返回" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{ info.status_text }}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 收货地址 -->
      <div class="aui-flex">
        <div class="aui-flex-add">
          <img :src="LoginUser.avatar" alt="" />
        </div>
        <div class="aui-flex-box">
          <h3>
            {{ info.address.consignee }} <em>{{ info.address.mobile }}</em>
          </h3>
          <p>{{ info.address.address_text + info.address.address }}</p>
        </div>
      </div>

      <!-- 商品评价 -->
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <!-- 评分 -->
          <van-field
            name="rate"
            label=""
            :rules="[{ required: true, message: '评分不能够为空' }]"
          >
            <template #input>
              <van-rate v-model="rate" />
            </template>
          </van-field>
          <!-- 评价内容 -->
          <van-field
            name="comment"
            v-model="comment"
            rows="3"
            autosize
            label=""
            type="textarea"
            maxlength="120"
            placeholder="请输入评价内容"
            show-word-limit
          />
          <!-- 评价图片 -->
          <van-field name="proimg" label="">
            <template #input>
              <van-uploader v-model="proimg" :max-count="5" multiple />
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            确认评价
          </van-button>
        </div>
      </van-form>
    </section>
  </section>
</template>
<script setup>
const { cookies } = useCookies();
const router = useRouter();
const route = useRoute();
const LoginUser = reactive(cookies.get("LoginUser"));
const orderproid = ref(0);
const info = ref({
  address: {},
  info: [],
  exrpess: {},
});
const rate = ref(null)
const comment = ref('')
const proimg = ref([])
const goBack = () => {
  router.push("/business/order/index");
};
onBeforeMount(() => {
  orderproid.value = route.query.orderproid ? route.query.orderproid : 0;
  getorderInfoData();
});
const getorderInfoData = async () => {
  let result = await Api.orderInfoPro({
    busid: LoginUser.id,
    orderproid: orderproid.value,
  });
  if (result.code == 1) {
    info.value = result.data;
  }
};
const onSubmit = async (val) => {
  // 清空表单数据
 let RequestData = new FormData();
  // 判断是否有上传图片
  if (val.proimg.length > 0) {
    val.proimg.forEach((item) => {
      console.log(item.file);
      RequestData.append(orderproid.value + "[]", item.file);
    });
  }
  RequestData.append("orderproid", orderproid.value);
  RequestData.append("busid", LoginUser.id);
  RequestData.append("rate", rate.value);
  RequestData.append("comment", comment.value);

  let result = await Api.orderRate(RequestData);
  if (result.code == 1) {
    showNotify({
      type: "success",
      message: result.msg,
      onClose: () => {
        router.go(-1);
      },
    });
  } else {
    showNotify({ type: "danger", message: result.msg });
  }
};
</script>
<style>
@import url("/assets/css/info.css");
</style>
